import { memo } from 'react'
import type { FC, ReactNode } from 'react'
import { useNavigate, useLocation } from 'react-router'
import { Icon } from '@/components/web-react'
import { IMenus } from '@/router/route.ts'

interface IProps {
  children?: ReactNode
  option: IMenus
}

const ButtonMenu: FC<IProps> = (props) => {
  const { option } = props
  const navigate = useNavigate()
  const location = useLocation()
  return (
    <div
      className={
        'text-[13px] select-none text-gray-800 h-[36px] my-1 cursor-pointer flex items-center rounded hover:bg-primary-600 hover:text-base-plate transition-colors duration-100 ' +
        `${option.path === location.pathname ? 'bg-primary-600 text-white' : 'bg-primary-300 text-white'}`
      }
      onClick={() => {
        navigate(option.path as string)
      }}
    >
      <span className={'mx-1'}>
        <Icon color={'#9a9ab0'} size={18} name={option.icon as string}></Icon>
      </span>
      <span className={'ml-2'}>{option.label}</span>
    </div>
  )
}

export default memo(ButtonMenu)
